<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>我的笔记</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    
    
    <script type="text/javascript" src="syntaxhighlighter/scripts/shCore.js"></script>
    <!--SyntaxHighlighter的对各个编程语言解析的脚本--> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCSharp.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushGolang.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJava.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJavaFX.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPlain.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushSql.js"></script> 
    <script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script> 
    
    <link type="text/css" rel="stylesheet" href="syntaxhighlighter/styles/shCoreDefault.css"/>
        
  </head>
  
  <body style="padding:0px 100px;" data-ng-app="myApp" data-ng-controller="myCtrl">
  
  <!-- ‘完成’ 提示框开始 -->
  <div class="alert alert-success alert-dismissible" role="alert" data-ng-hide="success | isNull">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong data-ng-bind="success"></strong>
  </div>
  <!-- ‘完成’ 提示框结束 -->
  
  <!-- ‘错误’ 提示框开始 -->
  <div class="alert alert-danger alert-dismissible" role="alert" data-ng-hide="danger | isNull">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <strong data-ng-bind="danger"></strong>
  </div>
  <!-- ‘错误’ 提示框结束 -->
  
  <!-- ‘用户登录’ 对话框开始 -->
  <div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">用户登录</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
              <label for="recipient-name" class="control-label">用户名:</label>
              <input type="text" name="name" class="form-control" id="recipient-name" data-ng-model="login_name" placeholder="请输入您的邮箱" autofocus>
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">密码:</label>
              <input type="password" name="password" class="form-control" id="recipient-password" data-ng-model="login_password" placeholder="请输入您的密码" >
            </div>
            <!-- ‘错误’ 提示框开始 -->
            <div class="alert alert-danger alert-dismissible" role="alert" data-ng-hide="login_danger | isNull">
              <strong data-ng-bind="login_danger"></strong>
            </div>
            <!-- ‘错误’ 提示框结束 -->
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-ng-click="login()" >登录</button>
        </div>
      </div>
    </div>
  </div>
  <!-- ‘用户登录’ 对话框结束 -->
  
  <!-- ‘添加顶级分类’ 对话框开始 -->
  <div class="modal fade" id="addTopModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">新的分类</h4>
        </div>
        <div class="modal-body">
            <div class="form-group">
              <label for="recipient-name" class="control-label">分类名:</label>
              <input type="text" class="form-control" id="recipient-name" data-ng-model="add_top_name">
            </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-ng-click="addTop()" >添加新分类</button>
        </div>
      </div>
    </div>
  </div>
  <!-- ‘添加顶级分类’ 对话框结束 -->
  
  <!-- ‘内容编辑’ 对话框开始 -->
  <div class="modal fade" id="editInfoModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="exampleModalLabel">内容编辑</h4>
        </div>
        <div class="modal-body">
          <style type="text/css">
          .edui-popup-content.edui-default{ height: auto !important; }
          </style>
          <input type="hidden" id="edit_id" data-ng-model="edit_id" />
          <input type="hidden" id="edit_cid" data-ng-model="edit_cid" />
          <input type="text" class="form-control" id="edit_name" data-ng-model="edit_name" style="margin-bottom:10px;" placeholder="请输入标题">
          <script id="editor" type="text/plain" style="width:100%;height:550px;" ></script>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary" data-ng-click="pushEdit()" >提交修改</button>
        </div>
      </div>
    </div>
  </div>
  <!-- ‘内容编辑’ 对话框结束 -->
  
  <div style="margin-top:20px;margin-bottom:20px;width:100%;text-align:right;">
    <div data-ng-show="UserName | isNull">
      <a href="#loginModal" data-toggle="modal">登录</a>
    </div>
    <div data-ng-hide="UserName | isNull">
      欢迎 ： <span data-ng-bind="UserName"></span> | 
      <a href="/logout">注销</a>
    </div>
  </div>
  
  <div class="row">
    <div class="col-md-1">
      <ul class="nav nav-pills nav-stacked" style="height:700px;overflow:auto;">
        <li role="presentation" class="active"><a href="#addTopModal" data-toggle="modal">+</a></li>
        <li role="presentation" data-ng-repeat="t in tops" data-ng-click="listArticle(t)" ><a href="#">{{t.Name}}</a></li>
    	  </ul>
    </div>
    <div class="col-md-3 list-group" style="height:700px;overflow:auto;">
        <a href="#" class="list-group-item active" data-ng-click="edit(0, showTopId)">+</a>
        <a href="#" class="list-group-item" data-ng-repeat="a in articles" data-ng-click="show(a.Id)"><span class="badge" data-ng-click="edit(a.Id, a.Cid)">+</span>{{a.Name}}</a>
    </div>
    <div class="col-md-8" >
      <div style="width:100%;height:700px;overflow:auto;border:1px solid #CCC;">
        <div id="content"></div>
      </div>
    </div>
  </div>
    

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
    
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor/ueditor.all.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="ueditor/lang/zh-cn/zh-cn.js"></script>
    
    <script>
    
      //例化编辑器
      //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
      var ue = UE.getEditor('editor');
    
      var app = angular.module('myApp', []);
      app.controller('myCtrl', function($scope, $http) {
        $scope.danger = "";
        $scope.success = "";
        $scope.showTopId = 0;
        
        $scope.isLogin = function(){
          $http.get("/isLogin")
        	    .success(function(data) {
              if(data.Login > 0){
                $scope.UserName = data.UserName;
              } else {
                $scope.UserName = '';
              }
        	  });
        };
        
        $scope.loadTop = function(){
          $http.get("/listTop")
        	    .success(function(data) {
              if(data.Code > 0){
                $scope.tops = data.Obj;
                $scope.listArticle($scope.tops[0])
              } else {
                $scope.danger = data.Message;
              }
        		    
        	  });
        };
        
        $scope.listArticle = function(t){
          $scope.showTopId = t.Id;
          $http.get("/listArticle/" + $scope.showTopId)
        	    .success(function(data) {
              if(data.Code > 0){
                $scope.articles = data.Obj;
              } else {
                $scope.danger = data.Message;
              }
        		    
        	  });
        }
        
        $scope.addTop = function(){
          if($scope.add_top_name == undefined || $scope.add_top_name == '' || $scope.add_top_name.length < 1){
             alert('分类名不能为空！');
          } else {
            $('#addTopModal').modal("hide");
            var obj = {};
            obj.Name = $scope.add_top_name;
            obj.Cid = 0;
            console.log(obj);
            $http({
            		url:'/addTop',
            		method:'POST',
            		data:obj
          		}).success(function(data, header, config, status){
          			if(data.Code > 0){
          				$scope.danger = "";
          			  $scope.success = data.Message;
          			} else {
          				$scope.danger = data.Message;
          			  $scope.success = "";
          			}
          			$scope.loadTop(); // 加载数据
          		}).error(function(data, header, config, status){
          			$scope.danger = data;
      			    $scope.success = "";
      			    $scope.loadTop(); // 加载数据
          	  });
          }
        }
        
        $scope.login = function(){
          if($scope.login_name == undefined || $scope.login_name == '' || $scope.login_name.length < 1){
             $scope.login_danger = "用户名不能为空！";
          } else if($scope.login_password == undefined || $scope.login_password == '' || $scope.login_password.length < 1){
             $scope.login_danger = "密码不能为空！";
          } else {
            var obj = {};
            obj.Name = $scope.login_name;
            obj.Password = $scope.login_password;
            console.log(obj);
            $http({
            		url:'/login',
            		method:'POST',
            		data: obj
          		}).success(function(data, header, config, status){
          			if(data.Code > 0){
          				$scope.login_danger = "";
                 $scope.isLogin(); // 判断用户是否已经登录
                 $('#loginModal').modal("hide");
          			} else {
          				$scope.login_danger = data.Message;
          			}
          		}).error(function(data, header, config, status){
          			$scope.login_danger = data.Message;
          	  });
          }
        }
        
        $scope.show = function(id){
          $.get('/getArticle/' + id, function(data, status){
            console.log(data);
            if(data.Code > 0){
              $('#content').html(data.Obj.Content);
              SyntaxHighlighter.highlight();
            }
          });
        };
        
        $scope.edit = function(id, cid){
          if($scope.UserName == undefined || $scope.UserName == '' || $scope.UserName.length < 1){
            alert("您没登录，无法添加新的笔记！");
          } else {
            $('#editInfoModal').modal("show");
            $('#edit_name').val("");
            ue.setContent("");
            
            $('#edit_id').val(id);
            $('#edit_cid').val(cid);
            
            if(id > 0){
              $.get('/getArticle/' + id, function(data, status){
                console.log(data);
                if(data.Code > 0){
                  $('#edit_name').val(data.Obj.Name);
                  ue.setContent(data.Obj.Content);
                }
              });
            } 
            
            console.log("修改修改哦")
            console.log("aid:" + id + " cid:" + cid)
          }
        };
        
        $scope.pushEdit = function(){
          var name = $('#edit_name').val()
          if(name == undefined || name == '' || name.length < 1){
             alert('标题不能为空！');
          } else {
            var obj = {};
            obj.Id = $('#edit_id').val();
            obj.Cid = $('#edit_cid').val();
            obj.Name = name;
            obj.Content = UE.getEditor('editor').getContent();
            console.log(obj);
            $http({
            		url:'/pushEdit',
            		method:'POST',
            		data:obj
          		}).success(function(data, header, config, status){
          			if(data.Code > 0){
                 $('#editInfoModal').modal("hide");
          				$scope.danger = "";
          			  $scope.success = data.Message;
                 $scope.show(data.Obj.Id); // 判断是否已经登录
          			} else {
          				$scope.danger = data.Message;
          			  $scope.success = "";
          			}
          		}).error(function(data, header, config, status){
          			$scope.danger = data;
      			    $scope.success = "";
          	  });
          }
        }
        
        $scope.loadTop(); // 加载数据
        $scope.isLogin(); // 判断是否已经登录
      });
      
      
      
      // 过滤器，判断内容是否为空
      app.filter("isNull", function(){
        return function(input){
       		if(input == undefined || input == '' || input.length < 1){
       			return true;
       		} else {
       			return false;
       		}
        }
      });
    </script>
  </body>
</html>
